<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小肥推理屋（困难模式 - 颜色版）</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .game-container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .instructions {
            background-color: #e9e9e9;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .color-picker {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .color-option {
            width: 40px;
            height: 40px;
            margin: 0 5px;
            border-radius: 5px;
            cursor: pointer;
            border: 2px solid #ccc;
            transition: transform 0.1s;
        }
        .color-option:hover {
            transform: scale(1.1);
        }
        .color-option.selected {
            border: 2px solid #4CAF50;
            transform: scale(1.1);
        }
        .current-guess {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .color-selection {
            width: 40px;
            height: 40px;
            margin: 0 5px;
            border-radius: 5px;
            background-color: #ddd;
            border: 2px solid #ccc;
        }
        .color-selection.empty {
            background-color: #f0f0f0;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        button:hover {
            background-color: #45a049;
        }
        .guess-history {
            margin-top: 20px;
        }
        .guess-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .guess-colors {
            display: flex;
            margin-right: 20px;
        }
        .guess-color {
            width: 30px;
            height: 30px;
            margin-right: 5px;
            border-radius: 4px;
        }
        .feedback {
            display: flex;
        }
        .feedback-item {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border-radius: 50%;
        }
        .correct-position {
            background-color: green;
        }
        .correct-digit {
            background-color: orange;
        }
        .wrong {
            background-color: #ddd;
        }
        #attemptsRemaining {
            text-align: center;
            margin: 15px 0;
            font-weight: bold;
        }
        .game-over {
            color: red;
            font-weight: bold;
            font-size: 1.2em;
            text-align: center;
            margin-top: 20px;
        }
        .success {
            color: green;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>小肥推理屋（困难模式 - 颜色版）</h1>
        
        <div class="instructions">
            <p>游戏规则：</p>
            <ul>
                <li>密码是一个4位不重复的颜色组合</li>
                <li>每次猜测后，系统会告诉你：
                    <ul>
                        <li><span class="correct-position">绿色圆点</span>：颜色正确且位置正确</li>
                        <li><span class="correct-digit">橙色圆点</span>：颜色正确但位置错误</li>
                    </ul>
                </li>
                <li>你有10次机会破解密码</li>
            </ul>
        </div>
        
        <div class="color-picker" id="colorPicker"></div>
        
        <div class="current-guess" id="currentGuess">
            <div class="color-selection empty" data-index="0"></div>
            <div class="color-selection empty" data-index="1"></div>
            <div class="color-selection empty" data-index="2"></div>
            <div class="color-selection empty" data-index="3"></div>
        </div>
        
        <button id="guessButton">提交猜测</button>
        
        <div id="attemptsRemaining">剩余尝试次数: 10</div>
        
        <div class="guess-history" id="guessHistory"></div>
        
        <div id="gameOverMessage" class="game-over"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const colorPicker = document.getElementById('colorPicker');
            const currentGuessElement = document.getElementById('currentGuess');
            const guessButton = document.getElementById('guessButton');
            const attemptsRemaining = document.getElementById('attemptsRemaining');
            const guessHistory = document.getElementById('guessHistory');
            const gameOverMessage = document.getElementById('gameOverMessage');
            
            // 定义可用的颜色
            const colors = [
                { name: '红色', color: '#FF0000' },
                { name: '绿色', color: '#00FF00' },
                { name: '蓝色', color: '#0000FF' },
                { name: '黄色', color: '#FFFF00' },
                { name: '紫色', color: '#800080' },
                { name: '青色', color: '#00FFFF' },
                { name: '棕色', color: '#A52A2A' }
            ];
            
            // 生成随机密码
            let secretCode = generateSecretCode();
            let currentGuess = Array(4).fill(null);
            let attemptsLeft = 10;
            let gameOver = false;
            
            // 创建颜色选择器
            colors.forEach((color, index) => {
                const colorElement = document.createElement('div');
                colorElement.className = 'color-option';
                colorElement.style.backgroundColor = color.color;
                colorElement.dataset.colorIndex = index;
                colorElement.addEventListener('click', selectColor);
                colorPicker.appendChild(colorElement);
            });
            
            // 创建当前猜测的色块
            const colorSelections = document.querySelectorAll('.color-selection');
            colorSelections.forEach(selection => {
                selection.addEventListener('click', focusSelection);
            });
            
            let focusedIndex = 0;
            colorSelections[focusedIndex].classList.add('selected');
            
            guessButton.addEventListener('click', makeGuess);
            
            function generateSecretCode() {
                let colorIndices = Array.from({length: colors.length}, (_, i) => i);
                let code = [];
                for (let i = 0; i < 4; i++) {
                    let randomIndex = Math.floor(Math.random() * colorIndices.length);
                    code.push(colorIndices[randomIndex]);
                    colorIndices.splice(randomIndex, 1);
                }
                return code;
            }
            
            function selectColor(event) {
                if (gameOver) return;
                
                const colorIndex = parseInt(event.target.dataset.colorIndex);
                currentGuess[focusedIndex] = colorIndex;
                
                // 更新当前猜测显示
                updateCurrentGuessDisplay();
                
                // 移动焦点到下一个色块
                focusedIndex = (focusedIndex + 1) % 4;
                colorSelections.forEach((selection, index) => {
                    selection.classList.toggle('selected', index === focusedIndex);
                });
            }
            
            function focusSelection(event) {
                if (gameOver) return;
                
                const selectedIndex = parseInt(event.target.dataset.index);
                colorSelections.forEach((selection, index) => {
                    selection.classList.toggle('selected', index === selectedIndex);
                });
                focusedIndex = selectedIndex;
            }
            
            function updateCurrentGuessDisplay() {
                colorSelections.forEach((selection, index) => {
                    if (currentGuess[index] !== null) {
                        selection.style.backgroundColor = colors[currentGuess[index]].color;
                        selection.classList.remove('empty');
                    } else {
                        selection.style.backgroundColor = '#f0f0f0';
                        selection.classList.add('empty');
                    }
                });
            }
            
            function makeGuess() {
                if (gameOver) return;
                
                // 检查是否选择了所有颜色
                if (currentGuess.includes(null)) {
                    alert('请选择所有4个颜色后再提交！');
                    return;
                }
                
                attemptsLeft--;
                attemptsRemaining.textContent = `剩余尝试次数: ${attemptsLeft}`;
                
                // 计算反馈
                let correctPositions = 0;
                let correctColors = 0;
                let guessCopy = [...currentGuess];
                let secretCopy = [...secretCode];
                
                // 首先检查正确位置
                for (let i = 0; i < 4; i++) {
                    if (guessCopy[i] === secretCopy[i]) {
                        correctPositions++;
                        guessCopy[i] = null;
                        secretCopy[i] = null;
                    }
                }
                
                // 然后检查正确颜色但位置错误
                for (let i = 0; i < 4; i++) {
                    if (guessCopy[i] !== null && secretCopy.includes(guessCopy[i])) {
                        correctColors++;
                        secretCopy[secretCopy.indexOf(guessCopy[i])] = null;
                    }
                }
                
                // 添加到历史记录
                const guessItem = document.createElement('div');
                guessItem.className = 'guess-item';
                
                // 创建猜测颜色显示
                const guessColors = document.createElement('div');
                guessColors.className = 'guess-colors';
                currentGuess.forEach(colorIndex => {
                    const colorElement = document.createElement('div');
                    colorElement.className = 'guess-color';
                    colorElement.style.backgroundColor = colors[colorIndex].color;
                    guessColors.appendChild(colorElement);
                });
                guessItem.appendChild(guessColors);
                
                // 创建反馈显示
                const feedback = document.createElement('div');
                feedback.className = 'feedback';
                
                // 添加正确位置的反馈（绿色）
                for (let i = 0; i < correctPositions; i++) {
                    const feedbackItem = document.createElement('div');
                    feedbackItem.className = 'feedback-item correct-position';
                    feedback.appendChild(feedbackItem);
                }
                
                // 添加正确颜色但位置错误的反馈（橙色）
                for (let i = 0; i < correctColors; i++) {
                    const feedbackItem = document.createElement('div');
                    feedbackItem.className = 'feedback-item correct-digit';
                    feedback.appendChild(feedbackItem);
                }
                
                // 填充剩余的空白反馈
                const totalFeedback = correctPositions + correctColors;
                for (let i = 0; i < 4 - totalFeedback; i++) {
                    const feedbackItem = document.createElement('div');
                    feedbackItem.className = 'feedback-item wrong';
                    feedback.appendChild(feedbackItem);
                }
                
                guessItem.appendChild(feedback);
                guessHistory.appendChild(guessItem);
                
                // 检查游戏是否结束
                if (correctPositions === 4) {
                    gameOver = true;
                    gameOverMessage.textContent = '恭喜你！密码破解成功！';
                    gameOverMessage.className = 'game-over success';
                    guessButton.disabled = true;
                    colorSelections.forEach(selection => {
                        selection.style.pointerEvents = 'none';
                    });
                    document.querySelectorAll('.color-option').forEach(option => {
                        option.style.pointerEvents = 'none';
                    });
                } else if (attemptsLeft === 0) {
                    gameOver = true;
                    
                    // 显示正确密码
                    const correctColorsElement = document.createElement('div');
                    correctColorsElement.style.marginTop = '10px';
                    secretCode.forEach(colorIndex => {
                        const colorElement = document.createElement('div');
                        colorElement.style.display = 'inline-block';
                        colorElement.style.width = '20px';
                        colorElement.style.height = '20px';
                        colorElement.style.marginRight = '5px';
                        colorElement.style.borderRadius = '4px';
                        colorElement.style.backgroundColor = colors[colorIndex].color;
                        correctColorsElement.appendChild(colorElement);
                    });
                    
                    gameOverMessage.innerHTML = `游戏结束！正确密码是: `;
                    gameOverMessage.appendChild(correctColorsElement);
                    gameOverMessage.className = 'game-over';
                    guessButton.disabled = true;
                    colorSelections.forEach(selection => {
                        selection.style.pointerEvents = 'none';
                    });
                    document.querySelectorAll('.color-option').forEach(option => {
                        option.style.pointerEvents = 'none';
                    });
                }
                
                // 重置当前猜测
                currentGuess = Array(4).fill(null);
                updateCurrentGuessDisplay();
                focusedIndex = 0;
                colorSelections.forEach((selection, index) => {
                    selection.classList.toggle('selected', index === focusedIndex);
                });
            }
        });
    </script>
</body>
</html>